<template>
  <div
    ref="customForm"
    class="custom-datetime-picker custom--select custom-form-container"
  >
    <CustomVanField
      :error-message="errorMessage"
      :required="required"
      :label="label"
      :disabled="canDo"
    >
      <van-field
        readonly
        clickable
        :style="bG"
        :disabled="canDo"
        :value="inputValue"
        :placeholder="placeholder || `请选择${label}`"
        @click="openPicker"
      >
        <template #button>
          <i
            :class="`van-icon van-icon-${rightIcon}`"
            @click.stop="clickRightIcon"
          />
        </template>
      </van-field>
    </CustomVanField>
    <van-popup
      v-model="show"
      round
      position="bottom"
      get-container="#app"
      :close-on-click-overlay="false"
    >
      <van-datetime-picker
        v-model="pickerVal"
        :type="type"
        :title="title || `选择${label}`"
        :columns-order="order"
        :min-date="minDate"
        @confirm="handlerDateTime"
        @cancel="handlerCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import picker from '../mixins/picker'
import field from '../mixins/field'
import rule from '../mixins/rule'
import model from '../mixins/model'
import datetime from '../mixins/datetime'
import collect from '../mixins/collect/input'
import disabled from '../mixins/setting/disabled'

export default {
  name: 'CustomDatetimePicker',

  mixins: [field, rule, model('change'), collect, disabled, picker, datetime],
}
</script>
